<template>
  <div class="page-container">
    <el-pagination
      :currentPage="props.page"
      :page-size="props.size"
      :page-sizes="props.sizes"
      background
      :layout="props.layput"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
const props = defineProps({
  page: {
    type: Number,
    default: 1,
    required: true,
  },
  size: {
    type: Number,
    default: 10,
    required: true,
  },
  sizes: {
    type: Array as PropType<number[]>,
    default: () => [10, 20, 50, 100]
  },
  layput: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  total: {
    type: Number,
    default: 0,
    required: true,
  },
  loadList: {
    type: Function as PropType<() => Promise<void>>,
    default: () => Promise.resolve()
  }
})

// const emit = defineEmits(['update:page', 'update:size'])
interface EmitsType {
  (e: 'update:page', page: number): void
  (e: 'update:size', size: number): void
}

const emit = defineEmits<EmitsType>()

const handleSizeChange = async (val: number) => {
  emit('update:page', 1)
  emit('update:size', val)
  await props.loadList()
}

const handleCurrentChange = async (val: number) => {
  emit('update:page', val)
  await props.loadList()
}
</script>
<style lang="scss" scoped>
.page-container {
  background: var(--el-color-white);
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: flex-end;
}
</style>